<template>
    <div class="site-management">
        <!-- 搜索栏 -->
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="2">
                <el-button type="primary" @click="handleSync">同步站点</el-button>
            </el-col>
            <el-col :span="8">
                <el-input placeholder="请输入站点名称或编号搜索" v-model="searchQuery" @keyup.enter="handleSearch">
                    <template #append>
                        <el-button icon="Search" @click="handleSearch"></el-button>
                    </template>
                </el-input>
            </el-col>

        </el-row>

        <!-- 站点列表 -->
        <el-row :gutter="20">
            <el-col :span="7">
                <el-card>
                    <!-- 站点卡片展示 -->
                    <div class="sites-container-header">
                        <p>站点名称</p>
                        <div>
                            操作
                        </div>
                    </div>
                    <div class="sites-container">
                        <div v-for="(site, index) in sites" @click="targetActive(index)" :key="index"
                            :class="['site-card', index == active && 'active']">
                            <p>{{ site.name }}</p>
                            <div class="actions">
                                <el-icon color="#5f9bf8">
                                    <EditPen />
                                </el-icon>
                                <p></p>
                                <el-icon color="#e36c75">
                                    <Delete />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="17">
                <el-card>
                    <div class="site-detail-header">
                        <h3>站点详情</h3>
                        <div class="top-right-btn">
                            <el-button @click="pumpFormVisible = true">关联</el-button>
                            <el-button @click="energyConsumptionFormVisible = true">能耗分析配置</el-button>
                        </div>
                    </div>
                    <el-row :gutter="20">

                        <el-col :span="12">
                            <el-form label-width="80px">
                                <el-form-item label="站点名称">
                                    <span>{{ currentSite.name }}</span>
                                </el-form-item>
                                <el-form-item label="站点编号">
                                    <span>{{ currentSite.code }}</span>
                                </el-form-item>
                                <el-form-item label="负责人">
                                    <el-input style="width: 240px;" v-model="currentSite.responsible" />
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="12">

                            <el-form label-width="80px">
                                <el-form-item label="位置">
                                    <span>{{ currentSite.location }}</span>
                                </el-form-item>
                                <el-form-item label="设备数量">
                                    <span>{{ currentSite.deviceCount }}</span>
                                </el-form-item>
                                <el-form-item label="运行状态">
                                    <el-tag :type="currentSite.status === '正常' ? 'success' : 'danger'">{{
                                        currentSite.status
                                    }}</el-tag>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card style="margin-top: 20px;">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <div class="top-right-btn" style="justify-content: space-between;">
                                <h3>监测量分组</h3>
                                <el-button type="primary" icon="Plus"
                                    @click="addGroupFormVisible = true">添加分组</el-button>
                            </div>
                            <el-collapse accordion>
                                <el-collapse-item>
                                    <template #title>
                                        <div class="collapse-name">
                                            <el-icon>
                                                <ArrowRight />
                                            </el-icon>
                                            <p>水泵监测组</p>
                                        </div>
                                    </template>
                                    <template #icon>
                                        <div class="icon-ele">
                                            <el-icon color="#5f9bf8" @click.step="monitoringVolumeFormVisible = true">
                                                <Plus />
                                            </el-icon>
                                            <el-icon color="#e36c75" style="margin-left: 10px;">
                                                <Delete />
                                            </el-icon>
                                        </div>
                                    </template>
                                    <div class="el-collapse-item__content">

                                        <el-table :data="monitoringData.pumpGroup">
                                            <el-table-column prop="name" label="监测量名称" />
                                            <el-table-column prop="unit" label="单位" />
                                            <el-table-column prop="value" label="当前值" />
                                            <el-table-column prop="status" label="状态">
                                                <template #default="scope">
                                                    <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">{{
                                                        scope.row.status }}</el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" align="center">
                                                <template #default="scope">
                                                    <el-button type="text" size="small"
                                                        @click="editMonitoring(scope.row)">编辑</el-button>
                                                    <el-button type="text" size="small"
                                                        @click="deleteMonitoring(scope.row)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="电气监测组">
                                    <template #title>
                                        <div class="collapse-name">
                                            <el-icon>
                                                <ArrowRight />
                                            </el-icon>
                                            <p>电气监测组</p>
                                        </div>
                                    </template>
                                    <template #icon>
                                        <div class="icon-ele">
                                            <el-icon color="#5f9bf8" @click.step="monitoringVolumeFormVisible = true">
                                                <Plus />
                                            </el-icon>
                                            <el-icon color="#e36c75" style="margin-left: 10px;">
                                                <Delete />
                                            </el-icon>
                                        </div>
                                    </template>
                                    <div class="el-collapse-item__content">
                                        <el-table :data="monitoringData.electricGroup">
                                            <el-table-column prop="name" label="监测量名称" />
                                            <el-table-column prop="unit" label="单位" />
                                            <el-table-column prop="value" label="当前值" />
                                            <el-table-column prop="status" label="状态">
                                                <template #default="scope">
                                                    <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">{{
                                                        scope.row.status }}</el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" align="center">
                                                <template #default="scope">
                                                    <el-button type="text" size="small"
                                                        @click="editMonitoring(scope.row)">编辑</el-button>
                                                    <el-button type="text" size="small"
                                                        @click="deleteMonitoring(scope.row)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <!-- 机泵关联配置 -->
        <el-dialog v-model="pumpFormVisible" align-center title="机泵关联配置" width="500">
            <div class="form-item">
                <p>选择机泵</p>
                <el-select v-model="pumpForm.name" placeholder="Select">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="form-item">
                <p>关联设备</p>
                <el-select v-model="pumpForm.equipment" placeholder="Select">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addGroupFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addGroupFormVisible = false">
                        确认添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 能耗分析配置 -->
        <el-dialog v-model="energyConsumptionFormVisible" align-center title="能耗分析配置" width="500">
            <div class="form-item">
                <p>分析周期</p>
                <el-select v-model="energyConsumptionForm.time" placeholder="Select">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="form-item">
                <p>能耗指标</p>
                <el-radio-group v-model="energyConsumptionForm.index">
                    <!-- <el-checkbox label="用电量" value="Value A" />
                    <el-checkbox label="用水量" value="Value B" />
                    <el-checkbox label="能耗比" value="Value C" /> -->
                    <el-radio :value="3">用电量</el-radio>
                    <el-radio :value="6">用水量</el-radio>
                    <el-radio :value="9">能耗比</el-radio>
                </el-radio-group>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="energyConsumptionFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="energyConsumptionFormVisible = false">
                        确认添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 添加分组 -->
        <el-dialog v-model="addGroupFormVisible" align-center title="添加分组" width="500">
            <div class="form-item">
                <p>分组名称</p>
                <el-input v-model="addGroupForm.name" size="large" autocomplete="off" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addGroupFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addGroupFormVisible = false">
                        确认添加
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="monitoringVolumeFormVisible" align-center title="添加监测量" width="500">
            <div class="form-item">
                <p>监测量名称</p>
                <el-input v-model="monitoringVolumeForm.name" autocomplete="off" placeholder="请输入监测量名称" />
            </div>
            <div class="form-item">
                <p>单位</p>
                <el-input v-model="addGroupForm.unit" autocomplete="off" placeholder="请输入单位" />
            </div>
            <div class="form-item">
                <p>当前值</p>
                <el-input v-model="addGroupForm.crrentValue" autocomplete="off" placeholder="请输入当前值" />
            </div>
            <div class="form-item">
                <p>状态</p>
                <el-select v-model="addGroupForm.state" placeholder="Select" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="monitoringVolumeFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="monitoringVolumeFormVisible = false">
                        确认添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 数据定义
const searchQuery = ref('');
const addGroupFormVisible = ref(false);
const active = ref('1');
const sites = ref([
    { name: '清水湾泵站', status: '正常' },
    { name: '红树林泵站', status: '正常' },
    { name: '湾区泵站', status: '正常' }
]);
const addGroupForm = ref({
    name: ''
});
const monitoringVolumeFormVisible = ref(false);
const pumpFormVisible = ref(false);
const energyConsumptionFormVisible = ref(false);
const energyConsumptionForm = ref({
    time: ''
});
const pumpForm = ref({
    name: '',
    equipment: '',
    index: ''
});
const options = ref([
    { value: '正常', label: '正常' },
    { value: '异常', label: '异常' }
]);
const monitoringVolumeForm = ref({
    name: '',
    unit: '',
    crrentValue: '',
    state: ''
});
const currentSite = ref({
    name: '清水湾泵站',
    code: 'PS001',
    responsible: '',
    location: '北京市朝阳区',
    deviceCount: 12,
    status: '正常'
});
const monitoringData = ref({
    pumpGroup: [
        { name: '入口压力', unit: 'MPa', value: 0.5, status: '正常' },
        { name: '出口压力', unit: 'MPa', value: 0.8, status: '正常' },
        { name: '电机温度', unit: '℃', value: 75, status: '异常' }
    ],
    electricGroup: [
        { name: '电压', unit: 'V', value: 220, status: '正常' },
        { name: '电流', unit: 'A', value: 10, status: '正常' }
    ]
});

const targetActive = (index) => {
    active.value = index;
};
// 方法定义
function handleSearch() {
    // 实现搜索逻辑
}

function handleSync() {
    // 实现同步逻辑
}

function editSite(site) {
    // 实现编辑站点逻辑
}

function deleteSite(site) {
    // 实现删除站点逻辑
}

function editMonitoring(monitoring) {
    // 实现编辑监控数据逻辑
}

function deleteMonitoring(monitoring) {
    // 实现删除监控数据逻辑
}

onMounted(() => {
    // 组件挂载后执行的逻辑
});
</script>

<!-- 您的模板代码 -->

<style scoped lang="scss">
.site-management {}

.top-right-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.el-collapse-item__content {
    padding: 20px 0 10px 10px;
}


:deep(.el-table__row) {}

.site-detail-header {
    display: flex;
}

.sites-container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    padding: 0 10px;
    height: 40px;
}

.sites-container {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
}

.site-card {
    padding: 5px 8px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.actions {
    display: flex;
    justify-content: space-around;
    align-items: center;

    p {
        margin-left: 5px;
    }
}

.active {
    background: #eff6ff;
}

.icon-ele {
    display: flex;
}

:deep(.el-collapse-item__header) {
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.el-collapse {
    border-radius: 10px;
    border: 1px solid #dbdbdb;
    overflow: hidden;
}

.collapse-name {
    display: flex;
    align-items: center;

    >p {
        margin-left: 5px;
    }
}

.form-item {
    padding: 0 10px;

    >p {
        font-size: 16px;
        font-weight: normal;
    }
}
</style>